<template>
  <div class="button">
    <h2>Plus按钮组件</h2>
    <p v-for="item in btntype" :key="item.id">
        <template v-for="val in item.link" :key="val.title">
            <el-button 
            :type="item.type" 
            :plain="val.plain" 
            :link="val.link" 
            :disabled="val.disabled" 
            :round="val.round" 
            :circle="val.circle"
            @click="console.log(val.title)"
            >{{val.title}}</el-button>
        </template>
    </p>
  </div>
</template>

<script setup>
import { reactive } from "vue";

const btntype = reactive([
    {
        id : 1,type : 'primary',link:[
            {title : '主要按钮-默认效果',link:false,plain:false,disabled:false,round:false,circle:false},
            {title : '主要按钮-链接属性',link:true,plain:false,disabled:false,round:false,circle:false},
            {title : '主要按钮-朴素属性',link:false,plain:true,disabled:false,round:false,circle:false},
            {title : '主要按钮-禁用属性',link:false,plain:false,disabled:true,round:false,circle:false},
            {title : '主要按钮-圆角属性',link:false,plain:false,disabled:false,round:true,circle:false},
            {title : '主要按钮-圆形属性',link:false,plain:false,disabled:false,round:false,circle:true},
        ]
    },
    {
        id : 2,type : 'success',link:[
            {title : '成功按钮-默认效果',link:false,plain:false,disabled:false,round:false,circle:false},
            {title : '成功按钮-链接属性',link:true,plain:false,disabled:false,round:false,circle:false},
            {title : '成功按钮-朴素属性',link:false,plain:true,disabled:false,round:false,circle:false},
            {title : '成功按钮-禁用属性',link:false,plain:false,disabled:true,round:false,circle:false},
            {title : '成功按钮-圆角属性',link:false,plain:false,disabled:false,round:true,circle:false},
            {title : '成功按钮-圆形属性',link:false,plain:false,disabled:false,round:false,circle:true},
        ]
    },
    {
        id : 3,type : 'info',link:[
            {title : '信息按钮-默认效果',link:false,plain:false,disabled:false,round:false,circle:false},
            {title : '信息按钮-链接属性',link:true,plain:false,disabled:false,round:false,circle:false},
            {title : '信息按钮-朴素属性',link:false,plain:true,disabled:false,round:false,circle:false},
            {title : '信息按钮-禁用属性',link:false,plain:false,disabled:true,round:false,circle:false},
            {title : '信息按钮-圆角属性',link:false,plain:false,disabled:false,round:true,circle:false},
            {title : '信息按钮-圆形属性',link:false,plain:false,disabled:false,round:false,circle:true},
        ]
    },
    {
        id : 4,type : 'warning',link:[
            {title : '警告按钮-默认效果',link:false,plain:false,disabled:false,round:false,circle:false},
            {title : '警告按钮-链接属性',link:true,plain:false,disabled:false,round:false,circle:false},
            {title : '警告按钮-朴素属性',link:false,plain:true,disabled:false,round:false,circle:false},
            {title : '警告按钮-禁用属性',link:false,plain:false,disabled:true,round:false,circle:false},
            {title : '警告按钮-圆角属性',link:false,plain:false,disabled:false,round:true,circle:false},
            {title : '警告按钮-圆形属性',link:false,plain:false,disabled:false,round:false,circle:true},
        ]
    },
    {
        id : 5,type : 'danger',link:[
            {title : '危险按钮-默认效果',link:false,plain:false,disabled:false,round:false,circle:false},
            {title : '危险按钮-链接属性',link:true,plain:false,disabled:false,round:false,circle:false},
            {title : '危险按钮-朴素属性',link:false,plain:true,disabled:false,round:false,circle:false},
            {title : '危险按钮-禁用属性',link:false,plain:false,disabled:true,round:false,circle:false},
            {title : '危险按钮-圆角属性',link:false,plain:false,disabled:false,round:true,circle:false},
            {title : '危险按钮-圆形属性',link:false,plain:false,disabled:false,round:false,circle:true},
        ]
    },
])
</script>

<style>

</style>